<template>
  <div class="notice-detail-container">
    <!-- 标题和返回按钮容器 -->
    <div class="title-bar">
      <h2 class="notice-title">{{ notice.title }}</h2>
      <el-button 
        type="text" 
        class="back-btn" 
        @click="goBack"
      >
        返回
      </el-button>
    </div>
    <!-- 加载中提示 -->
    <el-skeleton v-if="loading" :loading="loading" />
    <div v-else class="notice-content">
      <!-- 信息栏 -->
      <div class="notice-info">
        <div>
          <span>发布者：{{ notice.createName }}</span>
        </div>
        <div>
          <span>发布时间：{{ formatTime(notice.createTime) }}</span>
        </div>
      </div>
      <!-- 内容 -->
      <div class="notice-body">
        {{ notice.content }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElSkeleton, ElButton } from 'element-plus'
import 'element-plus/dist/index.css' 
import { useRouter, useRoute } from 'vue-router'
import api from '@/api/news'

const router = useRouter()
const route = useRoute()
const notice = ref({})
const loading = ref(true)
const noticeId = route.params.id

// 返回上一页的方法
const goBack = () => {
  router.back() 
}

onMounted(async () => {
  try {
    const res = await api.selectAll({ id: noticeId })
    notice.value = res.data
  } catch (error) {
    console.error('请求出错', error)
  } finally {
    loading.value = false
  }
})

const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  return (
    date.getFullYear() +
    '-' +
    (date.getMonth() + 1).toString().padStart(2, '0') +
    '-' +
    date.getDate().toString().padStart(2, '0') +
    ' ' +
    date.getHours().toString().padStart(2, '0') +
    ':' +
    date.getMinutes().toString().padStart(2, '0') +
    ':' +
    date.getSeconds().toString().padStart(2, '0')
  )
}
</script>

<style scoped>
.notice-detail-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
/* 标题和返回按钮的容器样式，设置为弹性布局 */
.title-bar {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 16px; 
}
.notice-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0; 
}
/* 返回按钮样式，设置颜色为灰色 */
.back-btn {
  color: #999; 
}
.notice-info {
  color: #999;
  margin-bottom: 12px;
  display: flex;
  gap: 20px;
}
.notice-body {
  line-height: 1.8;
  color: #333;
  white-space: pre-line; 
}
</style>